<template>
  <div class="axios">
    <h1>使用Axios组件</h1>
    <el-button type="primary" @click="handleClick">使用Axios获取接口数据</el-button>
    <el-divider/>
    <el-table :data="lists" style="width:100%">
      <el-table-column type="selection" :xs="2"/><!--选择框-->
      <el-table-column prop="name" label="名称" :xs="6"/>
      <el-table-column prop="price" label="价格" :xs="6"/> 
      <el-table-column prop="shopPrice" label="现价" :xs="6"/>
      <el-table-column prop="defaultImg" label="图片" :xs="4"/>    
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'AxiosView',
  data() {
    return {
      lists:[]
    }
  },
  methods: {
    handleClick() {
      /*原生Axios*/
      // axios({
      //   method: 'post',
      //   url:'http://47.108.189.177:8080/api/v1/catalog/category/product_list/31',
      //   data: {
      //     id: '31'
      //   }
      // }).then(res =>{
      //   console.info(res.data);
      //   if (res.errorCode == 0) {
      //     this.lists = res.data;
      //     console.info(this.lists);
      //   }
      // })

      /*使用工具类*/
      this.$post(this.API.BASE_SERVER_URL + "/api/v1/catalog/category/product_list/31").then((res) => {
        if (res.errorCode == 0) {
          this.lists = res.data;
        }
      });
    }
  }
}
</script>

